<template>
  <div id="account">
    <Breadcrumb :pathContent="content" />
    <el-form :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm">
      <div class="information-page">
        <el-form-item class="information-title">
          <h1>基础信息</h1>
        </el-form-item>
        <div class="basic-information">
          <div class="information-left-page">
            <el-form-item label="登录账号"
              prop="account">
              <el-input v-model="ruleForm.account"
                placeholder="请输入账号"
                disabled v-filterSpecialChar></el-input>
            </el-form-item>
            <div style="overflow: hidden;">
              <div class="information-left">
                <el-form-item label="姓名"
                  prop="name">
                  <el-input v-model="ruleForm.name"
                    placeholder="请输入姓名" maxlength="10" v-filterSpecialChar></el-input>
                </el-form-item>
              </div>
              <div class="information-right">
                <el-form-item label="手机"
                  prop="mobile">
                  <el-input v-model="ruleForm.mobile"
                    placeholder="请输入手机号码"></el-input>
                </el-form-item>
              </div>
            </div>
            <el-form-item label="性别"
              style="text-align: left;">
              <el-radio-group v-model="sex">
                <el-radio label="1">男</el-radio>
                <el-radio label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="部门"
              prop="depts">
              <el-cascader :options="dept"
                :props="{ value: 'id', label: 'department', children: 'adminDepartments' }"
                v-model="ruleForm.depts"
                 change-on-select
                :show-all-levels="false"
                @change="setDept">
              </el-cascader>
            </el-form-item>
            <el-form-item label="职位">
              <el-input v-model="ruleForm.position"
                placeholder="请输入职位"></el-input>
            </el-form-item>
           
            <el-form-item label="部门负责人"
              style="text-align: left;">
              <el-radio-group v-model="ruleForm.responsible">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="information-left">
              <el-form-item label="Email"
                prop="email">
                <el-input v-model="ruleForm.email"
                  placeholder="请输入邮箱"></el-input>
              </el-form-item>
            </div>
            <div class="information-right">
              <el-form-item label="QQ"
                prop="qq">
                <el-input v-model="ruleForm.qq"
                  placeholder="请输入QQ号码"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="information-right-page">
            <el-form-item label="员工头像"
              style="margin-bottom: 28px;">
              <el-upload class="avatar-uploader"
               action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :http-request="sendChange"
                :on-change="onFilesAdd">
                <img v-if="oldPath"
                  :src="oldPath"
                  class="avatar"
                  width="88"
                  height="88" />
                <i v-else
                  class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <p class="img-content">仅支持JPG, JPEG, BMP, PNG格式, 文件小于10M<br />(建议使用缕空白色图像, 最佳尺寸126 * 45px)</p>
            </el-form-item>
          </div>
        </div>
        <el-form-item class="information-title page-title"
          v-if="show">
          <h1>账号权限
            <label style="color: rgb(145, 160, 177); font-size: 12px; font-weight: 300; margin-left: 30px;">权限与角色关联, 这样该账号的角色可完成权限设置</label>
          </h1>
        </el-form-item>
        <el-form-item label="商家端权限"
          class="group-page"
          v-if="show">
          <el-checkbox-group v-model="supRolesId"
            style="text-align: left;"
            :disable="!roleDisable">
            <el-checkbox v-for="item in supRoles"
              :label="item.id"
              :key="item.id"
              name="type">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="员工端权限"
          class="group-page"
          v-if="show">
          <el-checkbox-group v-model="staffRolesId"
            style="text-align: left;"
            :disable="!roleDisable">
            <el-checkbox v-for="item in  staffRoles"
              :label="item.id"
              :key="item.id"
              name="type">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </div>
      <div class="information-btn">
        <el-form-item>
          <el-button type="primary"
            @click="submitForm('ruleForm')">保存</el-button>
          <el-button @click="back">取消</el-button>
        </el-form-item>
      </div>
    </el-form>
   
  </div>
</template>
<script>
import {
  getStaffAll,
  getDeptstaffAll,
  updateStaff,
  getNum,
  getFloorList,
  upimg
} from "../../../public/js/setting";
import Validity from "@/public/js/validate.js";
const ButtonFooter = () => import("@/components/common/ButtonFooter");
const Breadcrumb = () => import("@/components/common/Breadcrumb");
import { has } from "@/public/js/util";
export default {
  name: "AddAccount",
  data() {
    return {
      content: {
        firstTitle: "设置",
        secondTitle: "编辑账号",
        type: "close"
      },
      dept: [],
      depts: [],
      rolesId: [],
      roles: null,
      AdminUserAddRequest: {},
      account: "",
      id: null,
      show: JSON.parse(sessionStorage.getItem("isAdmin")),

      floorList: [],
      numList: [],
      orignNum: "",
      numStr: "",

      orignfloorListData: [],
      num: "",
     
      rules: {
        account: [
          { required: true, message: "请您输入登录账号", trigger: "blur" }
        ],
        name: [{ required: true, message: "请您输入姓名", trigger: "blur" }],
        mobile: [
          { required: true, validator: Validity.checkTel, trigger: "blur" }
        ],
        email: [{ validator: Validity.checkMail, trigger: "blur" }],
        qq: [{ validator: Validity.checkQQ, trigger: "blur" }],
        depts: [{ required: true, message: "请您选择部门", trigger: "blur" }],
        num: [{ required: true, message: "请您选择楼区", trigger: "change" }],
        number: [
          {
            type: "array",
            required: true,
            message: "请您至少选择一个账号权限",
            trigger: "change"
          }
        ]
      },
      sex: "1",
      ruleForm: {
        account: "",
        name: "",
        mobile: "",
        dept: "",
        position: "",
        responsible: "",
        email: "",
        qq: "",
        depts: [],
        number: []
      },
      accountInfo: {},
      oldPath: "", //原始图片
      photoPath: "",
      roleDisable: false,
      staffRoles: [], //员工角色列表
      supRoles: [], //商家角色列表
      staffRolesId: [],
      supRolesId: []
    };
  },
  created() {
    // 判断登录用户是否能够选择觉得

    this.roleDisable = has("rolemember", this);
    getDeptstaffAll().then(res => {
      if (res.data.errCode === 0) this.dept = res.data.adminDepartments;
    });
    getStaffAll(this).then(res => {
      if (res.data.errCode === 0) {
        this.accountInfo = res.data.accountInfo;
        this.sex = this.accountInfo.sex;
        this.oldPath = this.accountInfo.photo;
        this.photoPath = this.accountInfo.photo;
        this.ruleForm.account = this.accountInfo.account;
        this.ruleForm.name = this.accountInfo.name;
        this.ruleForm.depts = this.accountInfo.departments;
        this.ruleForm.dept = this.accountInfo.dept;
        this.ruleForm.mobile = this.accountInfo.mobile;
        this.ruleForm.position = this.accountInfo.position;
        this.ruleForm.email = this.accountInfo.email;
        this.ruleForm.qq = this.accountInfo.qq;

        this.ruleForm.responsible = this.accountInfo.responsible;
        this.depts = this.accountInfo.departments;
        this.account = this.AdminUserAddRequest.account;
        this.rolesId = this.accountInfo.roles;
        this.staffRoles = this.accountInfo.staffRoles;
        this.supRoles = this.accountInfo.supRoles;
        this.id = this.accountInfo.id;
        // 格式化权限数据
       
        this.staffRoles.forEach(item=>{
          if (item.selected) {
            this.staffRolesId.push(item.id)
          }
        })
         this.supRoles.forEach(item=>{
          if (item.selected) {
            this.supRolesId.push(item.id)
          }
        })
       
      }
    });
    //
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.saveAccount();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 头像上传
    onFilesAdd(file, filelist) {},
    sendChange(e) {
      var reader = new FileReader();
      reader.readAsDataURL(e.file);
      reader.onload = e => {
        let photoPath = e.target.result;
        upimg({
          nowPath: photoPath,
          oldPath: this.oldPath
        }).then(res => {
          this.oldPath = res.data.path;
        });
      };
    },
    setDept(value) {
      console.log(value);
      this.ruleForm.dept = value[value.length - 1];
    },
    saveAccount() {
      //角色权限
      let rolesIdArray =  this.staffRolesId.concat(this.supRolesId);


      let data = {
        id: this.id,
        name: this.ruleForm.name,
        mobile: this.ruleForm.mobile,
        dept: this.ruleForm.dept,
        position: this.ruleForm.position,
        responsible: this.ruleForm.responsible,
        email: this.ruleForm.email,
        qq: this.ruleForm.qq,
        roles: rolesIdArray,
        sex: this.sex,
        photo: this.oldPath
      };
      updateStaff(data).then(res => {
        if (res.data.errCode === 0) {
          this.$message.success("账号编辑成功");
          this.$router.go(-1);
        }
      });
    },
    back() {
      this.$router.go(-1);
    }
  },
  components: {
    ButtonFooter,
    Breadcrumb
  }
};
</script>
<style lang="scss">
#account {
  margin-bottom: 63px;
  .el-cascader {
    width: 100%;
  }
  .btn {
    width: 82px;
    height: 34px;
    line-height: 34px;
    padding: 0;
    float: left;
    margin-right: 10px;
  }
  .cell-list {
    display: flex;
    flex-wrap: wrap;
    & > li {
      width: 20%;
      height: 34px;
      line-height: 34px;
      border: 1px solid #6d2377;
      text-align: center;
      margin-right: 10px;
      border-radius: 5px;
      margin-bottom: 10px;
      .close {
        margin-left: 10px;
        cursor: pointer;
      }
    }
  }
}
.information-page {
  background: white;
  margin-top: 10px;
  .group-page {
    .el-form-item__content {
      text-align: left;
    }
  }
}
.page-title,
.title {
  margin-bottom: 0;
}

.group-page {
  margin-bottom: 0;
  .el-checkbox-group {
    float: left;
    margin-right: 20px;
  }
}

.foo-warpper {
  padding: 0 20px 20px 20px;
}

.information-page {
  padding: 20px;
  .basic-information,
  .account-permissions {
    overflow: hidden;
    .information-left-page {
      width: 47%;
      float: left;
    }
    .information-right-page {
      width: 47%;
      float: right;
    }
    .information-right-page {
      width: 47%;
      float: right;
    }
  }
  .basic-information {
    .information-left-page {
      .information-title {
        .el-form-item__content {
          margin-left: 0 !important;
        }
      }
      .area {
        text-align: left;
      }
    }
  }
  h1 {
    color: #6d2377;
    text-align: left;
  }
}

.h-eight {
  height: 130px;
}
.line-h {
  width: 6%;
  line-height: 130px;
  text-align: center;
  border-right: 1px solid #e6e6e6;
}
.line-b-h {
  width: 4.5%;
  line-height: 4.5;
  border-right: 1px solid #e6e6e6;
}
.padding-b {
  line-height: 2;
  padding-bottom: 17px;
}
.padding-t {
  width: 73.4%;
  line-height: 2;
  padding-top: 22px;
  border-bottom: 1px solid #e6e6e6;
}
.hotel-l-bg {
  background-color: #eef1f9;
}

.el-select > .el-input {
  display: inline-block;
}

.information-left {
  width: 50%;
  float: left;
}
.information-right {
  width: 50%;
  float: left;
}
.information-title {
  .el-form-item__content {
    margin-left: 0 !important;
  }
}

.complexity {
  text-align: left;
  overflow: hidden;
  span {
    margin-top: 5px;
    line-height: 2;
    color: white;
    padding: 0 40px;
    text-align: center;
    display: inline-block;
    background-color: #e9ecf3;
    float: left;
    margin-right: 2px;
    font-size: 12px;
  }
}
.passwordbg {
  background-color: #1f88f0 !important;
}

.add-account .el-form .el-form-item label {
  text-align: right;
}

.information-btn {
  padding: 20px 0px 20px 55px;
  text-align: left;
  position: fixed;
  bottom: 0;
  background-color: white;
  box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.4);
  width: 79.7%;
  z-index: 1000;
  .el-form-item {
    margin-bottom: 0;
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}
</style>
